<template>
    <PageView>
        <a-card title="列表">
            <a-row :gutter="10" class="inputGroup">
                <a-col :xs="12" :md="6" :lg="6" :xl="4">
                    <a-range-picker v-model="time" :placeholder="['开始时间', '结束时间']" @change="getListTwo"/>
                </a-col>
                <a-col :xs="12" :md="6" :lg="6" :xl="4">
                    <a-input v-model="searchData.sn" placeholder="订单编号" @keyup.enter="getListTwo"/>
                </a-col>
                <a-col :xs="12" :md="6" :lg="6" :xl="4">
                    <a-input v-model="searchData.buy_user" placeholder="买家账号" @keyup.enter="getListTwo"/>
                </a-col>
                <a-col :xs="12" :md="6" :lg="6" :xl="4">
                    <a-input v-model="searchData.sell_user" placeholder="卖家账号" @keyup.enter="getListTwo"/>
                </a-col>
                <a-col :xs="12" :md="6" :lg="6" :xl="4">
                    <a-select allowClear v-model="searchData.status" style="width:100%" placeholder="状态"
                              @change="getListTwo">
                        <a-select-option :value="key" v-for="(value,key) in orderStatus">{{value}}</a-select-option>
                    </a-select>
                </a-col>
                <a-col :xs="12" :md="6" :lg="6" :xl="4">
                    <a-select allowClear v-model="searchData.payment" style="width:100%" placeholder="交易方式"
                              @change="getListTwo">
                        <a-select-option value="1">现金</a-select-option>
                        <a-select-option value="2">USDT</a-select-option>
                        <a-select-option value="3">现金+USDT</a-select-option>
                    </a-select>
                </a-col>
                <a-col :xs="12" :md="6" :lg="6" :xl="4">
                    <a-select allowClear v-model="searchData.coin" style="width:100%" placeholder="金额"
                              @change="getListTwo">
                        <a-select-option value="10">10</a-select-option>
                        <a-select-option value="100">100</a-select-option>
                        <a-select-option value="300">300</a-select-option>
                        <a-select-option value="1000">1000</a-select-option>
                        <a-select-option value="3000">3000</a-select-option>
                        <a-select-option value="10000">10000</a-select-option>
                        <a-select-option value="30000">30000</a-select-option>
                    </a-select>
                </a-col>
                <a-col :xs="12" :md="6" :lg="6" :xl="4">
                    <a-button-group>
                        <a-button type="primary" :loading="loading" @click="getListTwo">确定筛选</a-button>
                    </a-button-group>
                </a-col>
            </a-row>
            <a-table
                :loading="loading"
                :columns="columns"
                :dataSource="data"
                :pagination="{total,pageSize,showSizeChanger,current}"
                @change="changePagination"
                bordered :scroll="{x:true}">
            </a-table>
        </a-card>
    </PageView>
</template>

<script type="text/jsx">
    import Orders from '../../api/Orders'
    import { orderStatus,dealType } from '../../utils/status'
    export default {
        name: 'dealList',
        data () {
            return {
                loading: true,
                columns: [
                    {
                        title: '订单编号',
                        dataIndex: 'sn',
                        customRender: (v) => <a>{v}</a>
                    },
                    {
                        title: '买家账号',
                        dataIndex: 'buy_username',
                    },
                    {
                        title: '卖家账号',
                        dataIndex: 'sell_username',
                    },
                    {
                        title: '打款时间',
                        dataIndex: 'da_time',
                        customRender: (v) => v?this.timeOne(v):<a>未打款</a>
                    },
                    {
                        title: '收款时间',
                        dataIndex: 'get_time',
                        customRender: (v) => v?this.timeOne(v):<a>未收款</a>
                    },
                    {
                        title: '匹配金额',
                        dataIndex: 'coin',
                    },
                    {
                        title: '交易方式',
                        dataIndex: 'payment',
                        customRender:(v)=> {
                            return {
                                1:"现金",
                                2:"USDT",
                                3:"现金+USDT"
                            }[v]||"暂无"
                        }
                    },
                    {
                        title: '状态',
                        dataIndex: 'status',
                        customRender: (v) => orderStatus[v]
                    },
                ],
                data: [],
                total: 0,
                pageSize: 10,
                current: 1,
                showSizeChanger: true,
                searchData: {
                    buy_user: '',
                    sell_user: '',
                    status:undefined,
                    payment:undefined,
                    coin:undefined,
                    sn:""
                },
                time: [],
                orderStatus:this.delObj(),
            }
        },
        activated () {
            this.getList()
        },
        methods: {
            getListTwo () {
                this.current = 1
                this.getList()
            },
            getList () {
                this.loading = true
                Orders.index({
                    page: this.current,
                    num: this.pageSize,
                    ...this.searchData,
                    begin: Date.parse(this.time[0]) / 1000 || undefined,
                    last: Date.parse(this.time[1]) / 1000 || undefined
                }).then(res => {
                    this.data = res.order.map((value, key) => {
                        return { ...value, key }
                    })
                    this.loading = false
                    this.total = parseInt(res.count)
                })
            },
            changePagination (pagination) {
                Object.keys(pagination).forEach(val => {
                    this[val] = pagination[val]
                })
                this.getList()
            },
            delObj(){
                let obj = {...orderStatus}
                this.$delete(obj,"-3")
                this.$delete(obj,"-4")
                console.log(orderStatus)
                return obj
            }
        }
    }
</script>

<style scoped lang="less">
    .inputGroup {
        > div {
            margin-bottom: 20px;
        }
    }
</style>